<template>
  <div>
    <h2>App组件</h2>
    <MyDialog>
      <!-- 标签内的所有代码，都是给插槽传递的结构 -->
      <!-- v-slot可以用 # 号代替 -->
      <!-- <template #title="obj">  -->
      <template #title="{uname,info}"> 
        <!-- 接收到的值只能在当前的template里面用，所以这类插槽叫做【作用域插槽】 -->
        <!-- 添加学员 {{obj.uname}} {{obj.info}} -->
        添加学员 {{uname}} {{info}}
        </template>

      <template #content>
        <form action="">
          姓名：<input type="text" /><br />
          年龄：<input type="text" />
        </form>
        <br />
      </template>
        <!-- 没有被template包裹的所有内容都是传递给默认插槽的 -->
        <button>添加</button>
        <button>取消</button>
     
    </MyDialog>

    <MyDialog>
      <template v-slot:t> 提示消息 </template>

      <template v-slot:del>
        <p>你确定删除吗？</p>
      </template>

      <template v-slot:btn>
        <button>确认</button>
        <button>取消</button>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
export default {
  components: { MyDialog },
};
</script>

<style>
</style>